/* eslint-disable @typescript-eslint/no-explicit-any */
import React, { useEffect, useState } from "react";
import "./index.less";
import NavBar from "../../components/NavBar";
import { List, Pagination, Typography } from "antd";
import { getReserve } from "../../server/api";
import { IBookingRecord } from "./type";
const BookingRecord: React.FC = () => {
  const [pgn, setPgn] = useState({
    current: 1,
    pageSize: 10,
    total: 0,
  });
  const [records, setRecords] = useState<IBookingRecord[]>([]);

  const getBookingRecord = async () => {
    const res: any = await getReserve({
      pageNum: pgn.current,
      pageSize: pgn.pageSize,
    });
    console.log(res);
    setPgn((prevState) => ({
      ...prevState,
      total: res.total,
      current: res.current,
      pageSize: res.size,
    }));
    setRecords(res.records);
  };
  const changePage = async (page: number) => {
    setPgn((prevState) => ({ ...prevState, current: page }));
  };
  useEffect(() => {
    getBookingRecord();
  }, [pgn.current, pgn.total]);
  return (
    <>
      <NavBar></NavBar>
      <div className="br-ctn">
        <List
          size="large"
          header={<h2>预约记录</h2>}
          bordered
          dataSource={records}
          renderItem={(item) => (
            <List.Item className="br-ctn-list-item">
              <div>
                <span>{item.roomName}</span>
                <Typography.Text mark>{[item.siteNumber]}</Typography.Text>
              </div>

              <div className="br-ctn-list-item-right">
                <span
                  style={
                    item.reserveStatus ? { color: "red" } : { color: "green" }
                  }
                >
                  {item.reserveStatus ? "预约失败" : "预约成功"}
                </span>
                <span>
                  {item.startTime}--{item.endTime}
                </span>
              </div>
            </List.Item>
          )}
        />
        <Pagination
          total={pgn.total}
          pageSize={pgn.pageSize}
          current={pgn.current}
          onChange={changePage}
          align={"end"}
          // hideOnSinglePage={true}
        />
      </div>
    </>
  );
};
export default BookingRecord;
